<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>身份证号展示</title>
    <link rel="icon" href="{{ url_for('static', filename='ico/favicon_curl.png') }}">
    <link rel="stylesheet" href="{{ url_for('static', filename='css/idcard_s_show.css') }}">
    <link rel="stylesheet" href="{{ url_for('static', filename='css/alert_msg.css') }}">
    <script type="module" src="{{ url_for('static', filename='js/idcard_s_show.js') }}"></script>
</head>
<body>

<!--标题-->
<header class="header">
    <h2 class="title">姓名与身份证号列表</h2>
    <button id="backButton" onclick="history.back()">返回</button>
</header>

<!--容器-->
<div class="container">
    <table id="id_card_table">
        <thead>
        <tr>
            <th>姓 名</th>
            <th>身份证号</th>
        </tr>
        </thead>
        <tbody>
        {% for person in data %}
        <tr>
            <td>
                <div class="flex-container">
                    <span>{{ person.name }}</span>
                    <button class="copyButton" onclick="copy_text('{{ person.name }}', '姓名 ')">复制</button>
                </div>
            </td>
            <td>
                <div class="flex-container">
                    <span>
                        <span class="area" style="color: #0d47a1;">{{ person.idcard[:6] }}</span>&nbsp;&nbsp;
                        <span class="year" style="color: #ff5722;">{{ person.idcard[6:10] }}</span>
                        <span class="month_date" style="color: #ff00ff;">{{ person.idcard[10:14] }}</span>&nbsp;&nbsp;
                        <span class="suffix" style="color: #4caf50;">{{ person.idcard[14:] }}</span>
                    </span>
                    <button class="copyButton" onclick="copy_text('{{ person.idcard }}', '身份证号 ')">复制</button>
                </div>
            </td>
        </tr>
        {% endfor %}
        </tbody>
    </table>
</div>


<!-- 自定义通知, 右上角的通知区 -->
<div id="custom-alert" class="custom-alert"></div>

</body>
</html>